<div *ngIf="selectedComponent" class="component-details-panel-header" data-tests-id="w-sdc-designer-sidebar-head">
    <div class="icon">
        <div *ngIf="iconClassName; else svgIcon" class="large {{iconClassName}}"></div>
        <ng-template #svgIcon>
            <sdc-element-icon
                    [elementType]="selectedComponent.componentType === 'RESOURCE' ? selectedComponent.resourceType: (selectedComponent.originType || selectedComponent.componentType)"
                    [iconName]="selectedComponent.icon"
                    [uncertified]="!isTopologyTemplateSelected && selectedComponent.lifecycleState && 'CERTIFIED' !== selectedComponent.lifecycleState"></sdc-element-icon>
        </ng-template>
    </div>

    <div class="title" data-tests-id="selectedCompTitle" tooltip="&#8203;{{selectedComponent.name}}">
        {{selectedComponent.name}}
    </div>

    <svg-icon-label *ngIf="!isViewOnly && !isTopologyTemplateSelected && !selectedComponent.archived" name="edit-file-o"
                    clickable="true" size="small" class="rename-instance" data-tests-id="renameInstance"
                    (click)="renameInstance()"></svg-icon-label>
    <svg-icon-label *ngIf="!isViewOnly && !isTopologyTemplateSelected && !selectedComponent.archived" name="trash-o"
                    clickable="true" size="small" class="delete-instance" data-tests-id="deleteInstance"
                    (click)="deleteInstance()"></svg-icon-label>

</div>